<template>
  <div class="users-container">
    <h1>用户管理</h1>
    <n-card>
      <n-data-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
      />
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NCard, NDataTable } from 'naive-ui'
import { getUsersList } from '@/api'

const columns = [
  { title: 'ID', key: 'id' },
  { title: '用户名', key: 'username' },
  { title: '角色', key: 'role' },
  { title: '状态', key: 'status' },
  { title: '创建时间', key: 'createTime' }
]

const data = ref([])
const pagination = { pageSize: 10 }

getUsersList().then(res => {
  data.value = res.data.list
})
</script>

<style scoped>
.users-container {
  padding: 20px;
}
</style>